import { EyeInvisibleOutlined, LockOutlined } from "@ant-design/icons";
import { Button, Input, List, message, Space } from "antd";
import React, { ChangeEvent, useState } from "react";
import { useDispatch } from "react-redux";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import {
  changeComponentHidden,
  moveComponent,
  changeComponentTitle,
  changeSelectedId,
  toggleComponentLocked,
} from "../../../store/componentsReducer";
import SortableContainer from "../../components/DragSortable/SortableContainer";
import SortableItem from "../../components/DragSortable/SortableItem";

const Layer: React.FC = () => {
  const dispatch = useDispatch();
  const [changingId, setChangingId] = useState("");
  const { componentList, selectedId } = useGetComponentInfo();
  const { isPublished } = useGetPageInfo();
  const componentListWidthId = componentList.map((c) => ({
    ...c,
    id: c.id,
  }));

  function handleClick(id: string, isHidden: boolean) {
    // 当问卷已发布时，禁用选择功能
    if (isPublished) return;

    if (isHidden) return message.info("不能选中隐藏的组件");

    if (id === selectedId) {
      setChangingId(id);
    } else {
      setChangingId("");
      dispatch(changeSelectedId(id));
    }
  }

  function handleChangeTitle(event: ChangeEvent<HTMLInputElement>) {
    // 当问卷已发布时，禁用标题修改功能
    if (isPublished) return;

    const newTitle = event.target.value.trim();
    if (!newTitle || !selectedId) return;
    dispatch(changeComponentTitle({ id: selectedId, title: newTitle }));
  }

  function handleChangeHidden(id: string, isHidden: boolean) {
    // 当问卷已发布时，禁用隐藏功能
    if (isPublished) return;

    dispatch(changeComponentHidden({ id, isHidden }));
  }

  function handleChangeLocked(id: string) {
    // 当问卷已发布时，禁用锁定功能
    if (isPublished) return;

    dispatch(toggleComponentLocked({ id }));
  }

  function handleDragEnd(oldIndex: number, newIndex: number) {
    // 当问卷已发布时，禁用拖拽功能
    if (isPublished) return;

    dispatch(moveComponent({ oldIndex, newIndex }));
  }

  return (
    <SortableContainer items={componentListWidthId} onDragEnd={handleDragEnd}>
      <List
        dataSource={componentList}
        renderItem={(component) => {
          const { id, title, isHidden = false, isLocked } = component;

          return (
            <List.Item key={id}>
              <SortableItem id={id}>
                <div style={{ display: "flex" }}>
                  <div
                    style={{ width: "100%" }}
                    onClick={() => handleClick(id, isHidden)}
                  >
                    {id === changingId ? (
                      <Input
                        autoFocus
                        defaultValue={title}
                        onChange={handleChangeTitle}
                        onPressEnter={() => setChangingId("")}
                        onBlur={() => setChangingId("")}
                        disabled={isPublished}
                        allowClear
                      />
                    ) : (
                      <div
                        style={{
                          color: id === selectedId ? "#1890ff" : "#000",
                        }}
                      >
                        {title}
                      </div>
                    )}
                  </div>
                  <Space>
                    <Button
                      size="small"
                      shape="circle"
                      icon={<EyeInvisibleOutlined />}
                      onClick={() => handleChangeHidden(id, !isHidden)}
                      type={isHidden ? "primary" : "text"}
                      disabled={isPublished}
                    />
                    <Button
                      size="small"
                      shape="circle"
                      icon={<LockOutlined />}
                      onClick={() => handleChangeLocked(id)}
                      type={isLocked ? "primary" : "text"}
                      disabled={isPublished}
                    />
                  </Space>
                </div>
              </SortableItem>
            </List.Item>
          );
        }}
      />
    </SortableContainer>
  );
};

export default Layer;
